import { useState } from "react";
import {
	Form,
	Input,
	Button,
	message,
	Upload,
	Card,
	Space,
	Row,
	Col,
} from "antd";
import { useUserInfo } from "@/store/userStore";
import type { UploadFile } from "antd/es/upload/interface";
import { PlusOutlined } from "@ant-design/icons";

const ProfileTab = () => {
	const { username } = useUserInfo();
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);

	const [businessLicense, setBusinessLicense] = useState<UploadFile[]>([]);
	const [wechatQRCode, setWechatQRCode] = useState<UploadFile[]>([]);
	const [alipayQRCode, setAlipayQRCode] = useState<UploadFile[]>([]);

	const onFinish = async (values: any) => {
		try {
			setLoading(true);
			console.log("Form values:", values);
			message.success("保存成功");
		} catch (error) {
			message.error("保存失败");
		} finally {
			setLoading(false);
		}
	};

	const uploadProps = {
		beforeUpload: (file: File) => {
			const isImage = file.type.startsWith("image/");
			if (!isImage) {
				message.error("只能上传图片文件！");
				return false;
			}
			return false;
		},
		maxCount: 1,
	};

	return (
		<Form
			form={form}
			layout="vertical"
			onFinish={onFinish}
			initialValues={{
				username,
			}}
		>
			<Row gutter={[16, 16]}>
				<Col span={24} md={12}>
					<Card title="基本信息">
						<Form.Item
							label="公司简称"
							name="companyName"
							rules={[{ required: true, message: "请输入公司简称" }]}
						>
							<Input placeholder="请输入公司简称" />
						</Form.Item>

						<Form.Item
							label="备注"
							name="remark"
							rules={[{ required: true, message: "请输入备注" }]}
						>
							<Input.TextArea placeholder="请输入备注" />
						</Form.Item>

						<Form.Item
							label="姓名"
							name="realName"
							rules={[{ required: true, message: "请输入姓名" }]}
						>
							<Input placeholder="请输入姓名" />
						</Form.Item>

						<Form.Item
							label="手机号"
							name="phone"
							rules={[
								{ required: true, message: "请输入手机号" },
								{
									pattern: /^1[3-9]\d{9}$/,
									message: "请输入正确的手机号",
								},
							]}
						>
							<Input placeholder="请输入手机号" />
						</Form.Item>

						<Form.Item
							label="营业执照"
							name="businessLicense"
							rules={[{ required: true, message: "请上传营业执照" }]}
						>
							<Upload
								listType="picture-card"
								fileList={businessLicense}
								onChange={({ fileList }) => setBusinessLicense(fileList)}
								{...uploadProps}
							>
								{businessLicense.length < 1 && (
									<div>
										<PlusOutlined />
										<div style={{ marginTop: 8 }}>上传</div>
									</div>
								)}
							</Upload>
						</Form.Item>
					</Card>
				</Col>

				<Col span={24} md={12}>
					<Card title="账户信息">
						<Form.Item
							label="支付宝账号"
							name="alipayAccount"
							rules={[{ required: true, message: "请输入支付宝账号" }]}
						>
							<Input placeholder="请输入支付宝账号" />
						</Form.Item>

						<Form.Item
							label="微信收款码1"
							name="wechatQRCode"
							rules={[{ required: true, message: "请上传微信收款码" }]}
						>
							<Upload
								listType="picture-card"
								fileList={wechatQRCode}
								onChange={({ fileList }) => setWechatQRCode(fileList)}
								{...uploadProps}
							>
								{wechatQRCode.length < 1 && (
									<div>
										<PlusOutlined />
										<div style={{ marginTop: 8 }}>上传</div>
									</div>
								)}
							</Upload>
						</Form.Item>

						<Form.Item
							label="支付宝收款码"
							name="alipayQRCode"
							rules={[{ required: true, message: "请上传支付宝收款码" }]}
						>
							<Upload
								listType="picture-card"
								fileList={alipayQRCode}
								onChange={({ fileList }) => setAlipayQRCode(fileList)}
								{...uploadProps}
							>
								{alipayQRCode.length < 1 && (
									<div>
										<PlusOutlined />
										<div style={{ marginTop: 8 }}>上传</div>
									</div>
								)}
							</Upload>
						</Form.Item>
					</Card>
				</Col>

				<Col span={24}>
					<Card>
						<Form.Item>
							<Space>
								<Button type="primary" htmlType="submit" loading={loading}>
									保存
								</Button>
								<Button onClick={() => form.resetFields()}>重置</Button>
							</Space>
						</Form.Item>
					</Card>
				</Col>
			</Row>
		</Form>
	);
};

export default ProfileTab;
